<template>
  <div class="footer">
    <h1>Footer</h1>
    <p>count的值:{{ count }}</p>
    <!-- <p>price的值:{{ price }}</p> -->
    <h1>电影</h1>
    <button @click="getMovieList">获取电影</button>
    <ul>
      <li v-for="item in movieList" :key="item.tvId">{{ item.albumName }}</li>
    </ul>
    <hr />
    <h1>过滤了4-7的电影列表</h1>
    <ul>
      <li v-for="item in myMovieList" :key="item.tvId">{{ item.albumName }}</li>
    </ul>
    <hr />
    <h1>过滤了 五个字自定义的电影列表</h1>
    <ul>
      <li v-for="item in yourMovieList" :key="item.tvId">{{ item.albumName }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Footer",
  mounted() {},
  computed: {
    // ...mapState({price1:"price"})
    // ...mapState({ count1: "count", price: "price",movieList:"movieList" }),
    ...mapState(["count", "movieList"]),
    // ...mapGetters(["myMovieList"]),
    myMovieList() {
      return this.$store.getters.myMovieList;
    },
    yourMovieList(){
        return this.$store.getters.yourMovieList(5,6)
    }
  },
  methods: {
    ...mapActions(["getMovieList"]),
    /*  getMovieList() {
      this.$store.dispatch("getMovieList");
    }, */
  },
};
</script>

<style>
.footer {
  margin: 30px;
  background: palevioletred;
}
</style>